<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>优田儿童成长中心</title>
    <link href="/static/assets/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="/static/assets/css/lib/mmc-chat.css" rel="stylesheet"/>
    <link href="/static/assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="/static/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/nixon.css" rel="stylesheet">
    <link href="/static/assets/lib/lobipanel/css/lobipanel.min.css" rel="stylesheet">
    <link href="/static/assets/css/style.css" rel="stylesheet">
</head>

<body>
<div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
    <div class="nano">
        <div class="nano-content">
            <ul>
                <li>
                    <a href="/home/"><i class="ti-bar-chart"></i> 统计数据</a>
                </li>
                <li class="active">
                    <a href="/teacher/"><i class="ti-user"></i> 教师管理<span
                            class="sidebar-collapse-icon ti-angle-right"></span></a>
                </li>
                <li>
                    <a href="/child/"><i class="ti-user"></i> 幼儿管理</a>
                </li>
                <li>
                    <a href="/posts/"><i class="ti-desktop"></i> 岗位管理</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="header">
    <div class="pull-left">
        <div class="logo">
            <a>
                <img id="logoImg" src="/static/img/yt1.png" data-logo_big="/static/img/yt1.png"
                     data-logo_small="/static/img/yt3.png" alt="Nixon"/>
            </a>
        </div>
        <div class="hamburger sidebar-toggle">
            <span class="ti-menu"></span>
        </div>
    </div>
    <div class="pull-right p-r-15">
        <ul>
            <li class="header-icon dib">
                <img class="avatar-img" src="/static/assets/images/avatar/1.jpg" alt=""/> <span
                    class="user-avatar"><span th:text="${session.username}"></span>&nbsp;&nbsp;&nbsp;<i
                    class="ti-angle-down f-s-10"></i></span>
                <div class="drop-down dropdown-profile">
                    <div class="dropdown-content-body">
                        <ul>
                            <li><a href="/exit/"><i class="ti-power-off"></i> <span>注销</span></a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="content-wrap">
    <div class="main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <h1>教师工资管理</h1>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <a href="javascript:;" class="btn-link" style="font-size: 16px;" id="back">
                                    <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>返回
                                </a>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <div class="row">
                    <div class="card alert">
                        <div class="card-header">
                            <h4 id="teacher-info"></h4>
                            <div class="card-header-right-icon">
                                <a href="#" class="btn btn-success" id="add-salary-btn">添加教师工资</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table  table-striped table-responsive">
                                <thead>
                                <tr>
                                    <th>月份</th>
                                    <th>基本工资</th>
                                    <th>绩效</th>
                                    <th>奖金</th>
                                    <th>应发工资</th>
                                    <th>扣减</th>
                                    <th>增加</th>
                                    <th>班级人数</th>
                                    <th>注册人数</th>
                                    <th>实际出勤</th>
                                    <th>实发工资</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="salary-list-body">
                                </tbody>
                            </table>
                            <nav>
                                <ul class="pagination" id="pagination-container">
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            Copyright &copy; 2024
        </div>
    </div>
</div>
<script src="/static/assets/js/lib/jquery.min.js"></script>
<script src="/static/assets/js/lib/jquery.nanoscroller.min.js"></script>
<script src="/static/assets/js/lib/sidebar.js"></script>
<script src="/static/assets/js/lib/bootstrap.min.js"></script>
<script src="/static/assets/js/lib/mmc-common.js"></script>
<script src="/static/assets/js/lib/mmc-chat.js"></script>
<script src="/static/assets/js/lib/chart-js/Chart.bundle.js"></script>
<script src="/static/assets/js/lib/chart-js/chartjs-init.js"></script>
<script src="/static/assets/js/lib/datamap/d3.min.js"></script>
<script src="/static/assets/js/lib/datamap/topojson.js"></script>
<script src="/static/assets/js/lib/datamap/datamaps.world.min.js"></script>
<script src="/static/assets/js/lib/datamap/datamap-init.js"></script>
<script src="/static/assets/lib/lobipanel/js/lobipanel.js"></script>
<script src="/static/assets/js/scripts.js"></script>
<script>
    $(document).ready(function () {
        $('#back').click(function () {
            window.history.back();
        });
    });

    const teacherId = [[${t.tid}]];
    const ttype = [[${t.ttype}]];
    const pageSize = 8;

    $(function () {
        loadTeacherInfo();
        loadSalaryData();
    });

    function formatCurrency(val) {
        return '￥' + (val || 0).toFixed(2);
    }

    function loadTeacherInfo() {
        $.ajax({
            url: '/api/v1/manager/teacher/detail',
            method: 'GET',
            data: { id: teacherId },
            success: function (res) {
                const t = res.data;
                if (t) {
                    const badge = t.ttype === 1
                        ? '<span class="badge badge-primary">托育老师</span>'
                        : '<span class="badge badge-danger">托管老师</span>';
                    const imgSrc = t.timg
                        ? `data:image/jpeg;base64,${t.timg}`
                        : '/static/img/default.png';
                    const html = `
                    <img src="${imgSrc}" width="40" height="40" class="rounded-circle border mr-2" alt="教师头像"/>
                    <span class="color-info font-weight-bold mr-2">${t.tname}</span>
                    ${badge}
                `;
                    $('#teacher-info').html(html);
                    $('#add-salary-btn').attr('href', `/teacher_sal/add?id=${t.tid}&sid=${t.ttype}`);
                } else {
                    alert("教师工资信息未找到");
                }
            },
            error: function () {
                alert("教师工资信息请求失败");
            }
        });
    }

    function loadSalaryData(page = 1, size = 8) {
        $.get("/api/v1/manager/ysal/list", { tid: teacherId, page, size }, function (res) {
            const { items, total, page: curPage, size: pageSize, pages } = res.data;
            const tbody = $("#salary-list-body");
            tbody.empty();

            items.forEach(t => {
                const base = t.base_sal + t.subsidy + t.class_size + t.health + t.year + t.edu;
                const merit = t.merits_sal1 + t.merits_sal2 + t.merits_sal3 + t.merits_sal4 + t.merits_sal5;
                const bonus = t.full_time + t.safe + t.class_hour + t.newstu;
                const deduct = t.for_leave + t.other;
                const increase = t.class_out + t.add_class;
                const gross = base + merit + bonus;
                const net = gross - deduct + increase;

                const row = `
                <tr>
                    <td>${t.month}</td>
                    <td>${formatCurrency(base)}</td>
                    <td>${formatCurrency(merit)}</td>
                    <td>${formatCurrency(bonus)}</td>
                    <td class="color-primary">${formatCurrency(gross)}</td>
                    <td>￥-${deduct.toFixed(2)}</td>
                    <td>${formatCurrency(increase)}</td>
                    <td class="color-primary">${t.class_num}</td>
                    <td class="color-success">${t.class_reg}</td>
                    <td class="color-info">${t.sign_num}</td>
                    <td class="color-danger"><strong>${formatCurrency(net)}</strong></td>
                    <td>
                        <a href="/sal_mess/?sid=${t.sid}&ttype=${ttype}" class="btn btn-info m-b-10 m-l-5">详细</a>
                        <a href="/update_teachersal/?tid=${teacherId}&ttype=${ttype}&sid=${t.sid}" class="btn btn-warning m-b-10 m-l-5">编辑</a>
                        <a href="/del_teachersal/?sid=${t.sid}" class="btn btn-danger m-b-10 m-l-5">删除</a>
                    </td>
                </tr>`;
                tbody.append(row);
            });

            renderPagination(curPage, pages);
        });
    }

    function renderPagination(currentPage, totalPages) {
        const container = $("#pagination-container");
        container.empty();

        const createPage = (label, page, disabled, active) => {
            return `<li class="page-item ${disabled ? 'disabled' : ''} ${active ? 'active' : ''}">
                <a class="page-link" href="javascript:void(0);" ${disabled ? '' : `onclick="loadSalaryData(${page})"`}>
                    ${label}
                </a>
            </li>`;
        };

        container.append(createPage("上一页", currentPage - 1, currentPage <= 1));

        const maxPagesToShow = 5;
        const half = Math.floor(maxPagesToShow / 2);
        let start = Math.max(1, currentPage - half);
        let end = Math.min(totalPages, start + maxPagesToShow - 1);

        if (end - start < maxPagesToShow - 1) {
            start = Math.max(1, end - maxPagesToShow + 1);
        }

        for (let i = start; i <= end; i++) {
            container.append(createPage(i, i, false, i === currentPage));
        }

        container.append(createPage("下一页", currentPage + 1, currentPage >= totalPages));
    }

    $(document).on('click', 'a[href^="/del_teachersal/"]', function (e) {
        e.preventDefault();

        const url = $(this).attr('href');
        const urlParams = new URLSearchParams(url.split('?')[1]);
        const sid = urlParams.get("sid");

        if (!sid) {
            alert("参数错误！");
            return;
        }

        if (confirm("确认要删除该工资记录吗？")) {
            fetch(`/api/v1/manager/ysal/delete/${sid}`, {
                method: 'GET'
            })
                .then(response => response.json())
                .then(data => {
                    alert(data.message || "删除成功");
                    location.reload();
                })
                .catch(err => {
                    console.error(err);
                    alert("删除失败");
                });
        }
    });
</script>
<style>
    .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
</style>
<div class="copyrights">
    <h3>&copy; 版权所有 | </h3>
</div>
</body>
</html>